import React, { useEffect, useState } from 'react';
import Carousels from './components/carousel';
import OptionBars from './components/optionBars';
import SongSheets from './components/songSheet';
import { getRecommendSheet } from '@/pages/service';
import { get } from 'lodash'


const { Item } = SongSheets
function Found() {
  const [list, setList] = useState([])
  useEffect(() => {
    (async () => {
      const res = await getRecommendSheet()
      const data = get(res, 'data.recommend', [])
      setList(data)
    })()
  }, [])
  return (
    <div>
      <Carousels />
      <OptionBars />
      <SongSheets>
        {
          list.map(d => (
            <Item key={d.id} url={d.picUrl} name={d.name}/>
          ))
        }
      </SongSheets>
    </div>
  )
}
export default Found